<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell class="avatar-cell" title="头像" is-link center>
      <van-image class="avatar" round fit="cover" :src="user.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      :value="user.name"
      is-link
      @click="isEditNameShow = true"
    />
    <van-cell
      title="性别"
      :value="user.gender === 0 ? '男' : '女'"
      is-link
      @click="isEditGenderShow = true"
    />
    <van-cell title="生日" :value="user.birthday" is-link />
    <!-- /个人信息 -->

    <!-- 修改昵称 -->
    <van-popup
      style="height: 100%"
      class="intro-popup"
      v-model="isEditNameShow"
      position="bottom"
      get-container="body"
      @opened="$refs.name.focus()"
    >
      <update-name @close="isEditNameShow = false" v-model="user.name" />
    </van-popup>

    <van-popup v-model="isEditGenderShow" position="bottom"> </van-popup>
  </div>
</template>

<script>
// import UpdateGender from './components/update-gender'
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'

export default {
  name: 'UserProfile',
  components: { UpdateName },
  props: {},
  data() {
    return {
      user: {},
      isEditNameShow: false,
      isEditGendershow: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadUserProfile()
  },
  mounted() {},
  methods: {
    async loadUserProfile() {
      const { data } = await getUserProfile()
      this.user = data.data
    },
  },
}
</script>

<style scoped lang="less">
.van-popup {
  background-color: #f5f7f9;
}
</style>
